12.05.2019 в 02:00

React: JSX и рендеринг

Если вы новичок в React, вы, вероятно, слышали о JSX или JavaScript XML - это XML-подобный код для элементов и компонентов. В этой статье мы рассмотрим, что такое JSX и почему мы должны использовать его в наших приложениях React. Мы также посмотрим, что такое элементы и как мы можем отобразить их в DOM.

Что такое JSX?

Как уже упоминалось, JSX - это XML-подобный код, который мы можем использовать при кодировании с помощью React. Он был разработан командой в Facebook и предназначен не для того, чтобы предоставить более краткий синтаксис, помогающий упростить работу разработчика. Давайте посмотрим на наш первый пример:

const greeting = Hello, World!
;

Просто, правда?

Здесь у нас нет ни строки, ни HTML. Это JSX! Мы можем использовать его, чтобы использовать всю мощь JavaScript при создании наших элементов пользовательского интерфейса. И хотя это не является обязательным, это, безусловно, чрезвычайно полезный инструмент - он отлично проясняет ситуацию, когда мы работаем с пользовательским интерфейсом внутри нашего кода JavaScript.

Использование JSX

Давайте расширим наш вышеупомянутый пример, чтобы включить встроенное выражение.

const user = 'Bob Burger';
const greeting = Hello, {user};

ReactDOM.render(
 greeting,
 document.getElementById('root')
);

Мы используем фигурные скобки {} для встраивания переменной в наше выражение JSX. И внутри этих фигурных скобок мы можем встроить любое допустимое выражение JavaScript. Такие как user.firstName или printName(user) например.

Мы рассмотрим рендеринг подробно позже в этой статье, пока не обращайте внимания на описанный выше метод рендеринга!

Давайте встроим результат вызванной функции JavaScript:

function printName(user) {
 return user.firstName + ' ' + user.lastName;
}

const user = {
 firstName: 'Bob',
 lastName: 'Burger'
};

const greeting = (
 
   Hello, {printName(user)}!
 
);

ReactDOM.render(
 greeting,
 document.getElementById('root')
);

JSX под капотом

Так что же на самом деле происходит с JSX, когда мы визуализируем компоненты?

function Greeting() {
 return Hello, World!
}

Каждый элемент, отображаемый Greeting компонентом, преобразуется в React.createElement вызовы. Приведенный выше пример переносится в:

function Greeting() {
 return React.createElement("h1", {}, "Hello, World!")
}

React.createElement()

Давайте посмотрим на другой пример:

const greeting = (
 
   Hello, world!
 
);

При компиляции этот код выглядит следующим образом:

const greeting = React.createElement(
 'h1',
 {className: 'speak'},
 'Hello, world!'
);

Оба этих кодовых блока идентичны. И по сути объект создается так:

const greeting= {
 type: 'h1',
 props: {
   className: 'speak',
   children: 'Hello, world!'
 }
};

Этот объект известен как элемент React, и он очень похож на описание того, что вы видите на экране. React использует эти объекты для построения DOM и поддержания его в актуальном состоянии.

По сути, JSX просто делает React.createElement(component, props, …children) функцию более приятной для глаз. Другой пример:


 Menu bar

Перейдем к:

React.createElement(Navbar, {
 backgroundColor: "purple",
 opacity: 0.8
}, "Menu bar");

Давайте теперь перейдем к рассмотрению еще нескольких концепций...

Параметры в JSX

Мы углубимся в props в моей следующей статье! На данный момент полезно помнить, что при построении компонентов они часто отображают дочерние элементы, которые требуют правильного отображения данных. Параметры, которые мы передаем, это то, что мы называем props. В JSX есть несколько способов сделать это, например:

// по умолчанию "true", если значение не передано 


// Строковые литералы передаются как props 


// Выражения (приведенный ниже пример будет иметь значение 10) 


// Распространение атрибутов: передает весь объект props

Примечание: операторы if и for циклы не являются выражениями в JavaScript , поэтому их нельзя использовать в JSX напрямую! Вместо этого вы можете написать код так:

function NumberType(props) {
 let answer;
 if (props.number % 2 == 0) {
   answer = even;
 } else {
   answer = odd;
 }
 return {props.number} is an {answer} number;
}

Мы можем видеть, как наши параметры передаются в условные, оцениваются и затем возвращаются - все через JSX.

Потомки в JSX

Когда ваши приложения станут больше, вы обнаружите, что некоторые компоненты понадобятся для визуализации потомков. И затем эти дочерние компоненты также должны будут отображать дальнейшие дочерние компоненты и так далее! С JSX мы можем достаточно хорошо управлять этими древовидными структурами элементов. Практическое правило гласит: все элементы, возвращаемые компонентом, становятся его дочерними элементами.

Давайте кратко рассмотрим способы визуализации дочерних элементов с помощью JSX:

Строковые литералы

I'm a child!

В этом очень простом примере строка I’m a child является дочерним элементом MyComponent. И она доступна через props.children.

Элементы JSX как потомки

Допустим, мы хотим вернуть дочерний элемент HTML

, у которого есть два собственных дочерних элемента: и . Мы могли бы сделать это так:

function Header(props) {
 return (
   
     
     
   
 )
}

Выражения

Мы также можем передавать выражения как потомки для рендеринга в наш пользовательский интерфейс. Это было бы очень полезно с приложением списка дел, например:

function TodoItem(props) {
 return {props.content};
}

function TodoList() {
 const todos = ['paint house', 'buy more chips', 'conquer world'];
 return (
   
     {todos.map((content) => )}
   
 );
}

Функции

Функции могут быть полезны при обработке повторений, таких как рендеринг повторяющихся элементов пользовательского интерфейса. Мы можем создать структуры, которые React будет автоматически отображать для нас.

Давайте рассмотрим пример, где мы используем .map()функцию для создания новых страниц на сайте:

// Массив текущих страниц
const pages = [
 {
   id: 1,
   text: "Home",
   link: "/"
 },
 {
   id: 2,
   text: "About",
   link: "/about"
 },
 {
   id: 3,
   text: "Contact",
   link: "/contact"
 }
];

// Визуализирует , который генерирует дочерние элементы 
function Nav() {
 return (
   
     {pages.map(page => {
       return (
         
           {page.text}
         
       );
     })}
   
 );
}

Чтобы добавить новую страницу на наш веб-сайт, нам просто нужно добавить новый объект в массив pages и позволить React обработать все остальное!

Элементы рендеринга

Как я уверен, вы видели в этой статье, работая с JSX, мы работаем с элементами для рендеринга на нашей странице. Элемент описывает то, что вы видите на экране:

const element = Hello!
;

Несколько элементов, таких как этот, при объединении будут образовывать компоненты. Мы подробно рассмотрим компоненты в моей следующей статье!

Рендеринг наших элементов в DOM

Как правило, мы будем иметь подобный

в нашем HTML:

Это называется нашим узлом DOM. Все внутри него обрабатывается React DOM.

И для рендеринга элемента React в наш корневой узел мы передаем оба вида ReactDOM.render(), следующим образом:

const element = Hello!;
ReactDOM.render(element, document.getElementById('root'));

Hello! будет выведен на нашу страницу.

Обновление визуализированных элементов

Обратите внимание, что элементы React являются неизменяемыми! Как только элемент создан, вы не можете изменить его дочерние элементы или атрибуты. Если вы хотите обновить пользовательский интерфейс, вам нужно создать новый элемент и передать его ReactDOM.render().

Заключение

Итак мы рассмотрели основы JSX и рендеринга. И я надеюсь, вы начинаете понимать, насколько эти концепции полезны для нас, разработчиков, для создания приложений React.

Используя возможности JSX для передачи элементов в JavaScript, мы создаем очень работоспособный код. Структура JSX невероятно хорошо работает с React, и, несмотря на то, что JSX не является обязательным, это дает фантастический опыт разработки.

#React

1001

Войти на сайт